<style lang="scss">
  @import "../../../assets/css/_variable";

  .my-info {
    .resume {
      height: 100px;
      padding: 30px;
      background-color: $color-black;
      display: flex;

      .avatar {
        height: 100px;
        width: 100px;
        overflow: hidden;

        img {
          height: 100%;
          width: 100%;
        }
      }

      .nickname {
        margin-left: 1em;
        font-size:1.5em;
      }
    }

  }
</style>

<template>
  <div class="my-info">
    <xy-header></xy-header>
    <div class="resume">
      <div class="avatar">
        <img src="../../../assets/img/vn.jpg"/>
      </div>
      <span class="color-white nickname">民资</span>
      <span class="badge"></span>
    </div>
    <el-button-group>
      <el-button type="primary">主页</el-button>
      <el-button type="primary">简历</el-button>
      <el-button type="primary">徽章</el-button>
      <el-button type="primary">进度</el-button>
    </el-button-group>
    <div class="bg-white category">
      <el-button-group>
        <el-button type="primary" @click="$router.push({name:'线索',query:{root:'0'}})">目录选择</el-button>
      </el-button-group>
    </div>
    <div class="bg-white">
      继续练习
    </div>
    <div class="bg-white">
      最近关卡
    </div>
  </div>
</template>
<script type="text/babel">

  import XyHeader from '../sys/components/XyHeader.vue';
  import MyHighlight from './components/MyHighlight.vue';
  import MyQuestions from './components/MyQuestions.vue';
  import MyResume from './components/MyResume.vue';

  export default {
    data() {
      return {
        username: '',
        password: ''
      }
    },
    computed: {},
    methods: {},
    components: {
      XyHeader,
    }
  };
</script>
